<template>
  <li class="wrap">
    <div
      class="chec"
      >
      <div @click.stop="toggle"
           @dblclick="changeType">
        <span>{{model.value}}</span>
        <span v-if="isFolder" class="open"><i style="font-size: 14px;font-weight: bolder;margin-left:6px;" :class="open ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></span>
        <!--<el-tooltip class="item" effect="dark" placement="right" v-if="model.fatalValue">-->
          <!--<div slot="content">-->
            <!--{{$t('qualityCheck.feiZhiMingGeShu')}}{{model.Non_Fatal}}{{$t('qualityCheck.zeZhiMing')}}-->
          <!--</div>-->
          <!--<i class="iconfont icon-tixingweizhi"></i>-->
        <!--</el-tooltip>-->
        <span
          style="display:inline-block;margin-left:16px;"
        v-if="!isFolder">
        <el-radio-group
        :disabled="disabled"
        v-model.trim="form[model.name]"
        @change= "change">
        <el-radio size="mini" label="yes" style="margin-left:10px;"><span style="color:#41b27f;">{{$t('qualityCheck.quaPass')}}</span></el-radio>
        <el-radio size="mini" label="no" style="margin-left:10px;"><span style="color:#ff6b6b;">{{$t('qualityCheck.quaNoPass')}}</span></el-radio>
        <el-radio size="mini" label="dont" style="margin-left:10px;"><span style="color:#ff8403;">{{$t('qualityCheck.buSheJi')}}</span></el-radio>
        </el-radio-group>
        </span>
        <span v-if="isFolder" style="display:inline-block;margin-left:20px;">
        <input type="hidden" v-model="form[model.name]"/>
        <span style="display:inline-block;margin-left:6px;color:#41b27f;" class="parent-result" v-show="form[model.name]==='yes'" :class="[form[model.name]==='yes'? 'active':'','abc']">{{$t('qualityCheck.quaPass')}}</span>
        <span style="display:inline-block;margin-left:6px;color:#ff6b6b;" class="parent-result" v-show="form[model.name]==='no'" :class="[form[model.name]==='no'? 'active':'','']">{{$t('qualityCheck.quaNoPass')}}</span>
        <span style="display:inline-block;margin-left:6px;color:#ff8403;" class="parent-result" v-show="form[model.name]==='dont'" :class="[form[model.name]==='dont'? 'active':'','']">{{$t('qualityCheck.buSheJi')}}</span>
        </span>
      </div>
      </div>
      <ul v-show="open" v-if="isFolder">
        <item
        v-for="(one, index) in model.child"
        :parent="model"
        :form="form"
        :key="index"
        :model="one"
        :disabled="disabled"
          >
      </item>
    </ul>
  </li>
</template>
<script>
  export default {
    name: 'item',
    data () {
      return {
        open: true,
        fatal: ''
      }
    },
    props: {
      model: Object,
      form: Object,
      parent: Object,
      disabled: {type: Boolean, default: false}
    },
    computed: {
      isFolder: function () {
        return this.model.child &&
          this.model.child.length
      }
    },
    methods: {
      change () {
      },
      toggle: function () {
        if (this.isFolder) {
          this.open = !this.open
        }
      },
      changeType: function () {
        if (!this.isFolder) {
          this.open = true
        } else {
        }
      }
    },
    watch: {
      form: {
        deep: true,
        handler: function (newV) {
          var flog = true
          let arrFatal = []
          let arrNormal = []
          let nonFatalNum = 0
          if (!this.parent || !this.parent.child) {
            return
          }
          for (var i = 0; i < this.parent.child.length; i++) {
            let item = this.parent.child[i]
            if (!this.form[item.name]) {
              flog = false
              break
            }
            if (item.fatalValue && item.fatalValue === true) {
              nonFatalNum = parseInt(item.Non_Fatal, 10)
              arrFatal.push(this.form[item.name])
            } else {
              arrNormal.push(this.form[item.name])
            }
          }
          if (flog) {
            if (arrFatal.length !== 0) {
              let yes = 0
              let no = 0
              arrFatal.forEach(item => {
                if (item === 'yes') {
                  yes++
                } else if (item === 'no') {
                  no++
                } else {
                }
              })
              if (no > nonFatalNum && no !== 0) {
                arrNormal.push('no')
              } else if (yes !== 0) {
                arrNormal.push('yes')
              } else if (no = nonFatalNum && no !== 0) {
                arrNormal.push('yes')
              }else {
                arrNormal.push('dont')
              }
            }
            let yes = 0
            let no = 0
            arrNormal.forEach(item => {
              if (item === 'yes') {
                yes++
              } else if (item === 'no') {
                no++
              } else {
              }
            })
            if (no === 0) {
              if (yes !== 0) {
                this.form[this.parent.name] = 'yes'
              } else {
                this.form[this.parent.name] = 'dont'
              }
            } else {
              this.form[this.parent.name] = 'no'
            }
          }
        }
      }
    }
  }
</script>
<style lang="stylus" scope>
  @import '../../../../assets/common.styl'
  .wrap
    color $cf-gray1
  .chec
    font-size 12px
    margin-bottom 8px
    .open
      /*margin-left -14px*/
      cursor pointer
      /*color $c-main*/
      color #5b7ae8
    p
      font-size 12px
      margin-top 10px
  .icon-tixingweizhi
    display inline-block
    font-size 12px
    color $c-main
    line-height 14px
    height 14px
    width 14px
    text-align center
    border-radius 50%
    border 1px solid $c-main
  .active
    color $cf-blue
</style>
